<template>
  <n-card class="udp-login">
    <div class="udp-login-bg">
      <i class="square-left-top"> </i>
      <i class="square-left-bottom"> </i>
      <i class="round-center"> </i>
      <i class="round-center-right"> </i>
    </div>
    <div class="udp-login-content">
      <div class="udp-login-title">
        <h2 class="udp-login-title-name">{{ appName }}</h2>
        <p class="udp-login-title-sub">{{ appNameSub }}</p>
      </div>
      <div class="udp-login-form">
        <img class="udp-login-form-logo" :src="logoUrl" />
        <n-tabs type="line" justify-content="space-evenly">
          <template v-if="loginType !== '2'">
            <n-tab-pane name="user" tab="账号登录">
              <LoginForm />
            </n-tab-pane>
          </template>
          <template v-if="loginType !== '1'">
            <n-tab-pane name="IAM" tab="IAM登录">
              <LoginIAM />
            </n-tab-pane>
          </template>
        </n-tabs>
      </div>
    </div>
  </n-card>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { udpAppStore } from 'udp/store/app-store'
  import { udpUserStore } from 'udp/store/user-store'
  import { addColorAlpha, getColorPalette } from 'udp/utils/color'
  import LoginForm from 'udp/views/login/login-form.vue'
  import LoginIAM from 'udp/views/login/login-IAM.vue'
  import logoUrl from '/static/logo.png'
  export default defineComponent({
    name: 'Login',
    components: { LoginForm, LoginIAM },
    setup() {
      // 系统名称
      const UserStore = udpUserStore()
      const loginType = computed(() => UserStore.envMap.UDP_LOGIN_TYPE || import.meta.env.UDP_LOGIN_TYPE)
      // theme-渐变
      const appStore = udpAppStore()
      const theme = computed(() => appStore.theme)
      const linearGradient = computed(
        () =>
          `linear-gradient(180deg, ${addColorAlpha(theme.value, 0.15)} 0%, ${addColorAlpha(theme.value, 0.02)} 100%)`
      )
      // themeMode
      const themeLight = computed(() => appStore.themeMode !== 'dark')
      const modeColor = computed(() => (themeLight.value ? '#fff' : '#18181c'))
      const modeLinear = computed(
        () => `${addColorAlpha(modeColor.value, 0)} 0%,${addColorAlpha(modeColor.value, 1)} 100%`
      )
      const modeShadow = computed(() =>
        themeLight?.value ? getColorPalette('#EDF1F5', 6) : getColorPalette('#18181c', 6.3)
      )

      return {
        appName: computed(() => UserStore.envMap.UDP_TITLE || import.meta.env.UDP_TITLE),
        appNameSub: computed(() => UserStore.envMap.UDP_TITLE_SUB || import.meta.env.UDP_TITLE_SUB),
        logoUrl,
        modeLinear,
        linearGradient,
        modeShadow,
        loginType
      }
    }
  })
</script>
<style lang="less" scoped>
  @shadow-color: v-bind(modeShadow);
  @mode-linear: v-bind(modeLinear);
  @linear-gradient: v-bind(linearGradient);

  .linear-bg(@deg) {
    background: linear-gradient(@deg, @mode-linear);
  }

  .udp-login {
    position: relative;
    height: 100vh;
    padding: 0;

    &.n-card > :deep(.n-card__content:first-child) {
      padding: 0;
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360);
    }
  }
  @keyframes skew {
    from {
      transform: skew(0deg);
    }

    to {
      transform: skew(45deg);
    }
  }
  @keyframes size {
    from {
      transform: translateX(50%) scale(1);
      transform-origin: 50% 50%;
    }

    to {
      transform: translateX(50%) scale(1.3);
      transform-origin: 50% 50%;
    }
  }

  .udp-login-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    > i {
      position: absolute;
    }

    .square-left-top {
      top: 0;
      left: 0;
      width: 9%;
      height: 22.6%;
      opacity: 0.5;
      transform: rotate(45deg) translate(-40%);
      box-shadow: 4px 8px 12px 0 @shadow-color;
      animation: rotate 5s linear infinite alternate;
      .linear-bg(104deg);
    }

    .square-left-bottom {
      bottom: 0;
      left: 8%;
      width: 15.2%;
      height: 17.8%;
      border-radius: 8px;
      box-shadow: 0 8px 12px 0 @shadow-color;
      .linear-bg(90deg);

      animation: skew 5s linear infinite alternate;
    }

    .round-center {
      top: 50%;
      left: 50%;
      width: 32.14%;
      padding: 16.07% 0;
      border-radius: 50%;
      opacity: 0.6;
      transform: translate(-50%, -50%);
      box-shadow: -8px 0 12px 0 @shadow-color;
      .linear-bg(328deg);
    }

    .round-center-right {
      top: 41.5%;
      right: 0;
      width: 17%;
      padding: 8.5% 0;
      border-radius: 50%;
      opacity: 0.8;
      box-shadow: 0 8px 12px 0 @shadow-color;
      animation: size 5s linear infinite alternate;
      .linear-bg(180deg);
    }
  }

  .udp-login-content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 19%;
    background: @linear-gradient;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    > div {
      flex: 1;
    }
  }

  .udp-login-title {
    padding-right: 90px;

    .udp-login-title-name {
      margin: 16px 0;
      font-size: 40px;
      color: var(--n-text-color);
    }

    .udp-login-title-sub {
      margin: 0;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 2px;
      color: var(--n-text-color);
    }
  }

  .udp-login-form {
    max-width: 384px;
    padding: 40px 32px;
    text-align: center;
    background: var(--n-color);
    border-radius: 8px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);
    box-sizing: border-box;

    .udp-login-form-logo {
      width: 68px;
      height: 68px;
      padding: 5px;
      margin-bottom: 20px;
      border: 1px solid @shadow-color;
      border-radius: 50%;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
      box-sizing: border-box;
    }

    :deep(.n-tabs-bar) {
      background: rgba(0, 0, 0, 0);

      &::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 20px;
        height: 3px;
        background: var(--n-bar-color);
        border-radius: 100px 100px 0 0;
        content: '';
        transform: translateX(-50%);
      }
    }

    :deep(.n-tab-pane) {
      padding-top: 24px;
      text-align: left;
    }

    :deep(.anticon) {
      color: var(--n-bar-color);
    }
  }
</style>
